import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types'

import {
    Form,
    Input,
    Radio,
    Button,
    Icon
} from 'antd';
import './index.less'

const inlineStyle={
    display:'inline'
}
const noneStyle={
    display:'none'
}
const blockStyle={
    display:'block',
    textAlign:'right'
}

class SForm extends PureComponent{
    render(){
        const { style, layout, data, hidedata } = this.props;

        const buttonItemLayout = layout === 'horizontal' ? {
            wrapperCol: { span: 14, offset: 4 },
        } : null;

        //表单数据
        const { expand, collapse } = this.state
        return (
            <div className="searchtool" style={style}>
                <Form
                    layout={layout}
                    onSubmit={this.handleSearch}
                    >
                    <div style={inlineStyle}>                        
                        {
                            data?data.map((item,index)=>{
                                return <Fragment key={index}>{ this.itemlist(item) }</Fragment>
                            }):''
                        }
                    </div>
                    <div style={expand ? inlineStyle : noneStyle }>
                        {
                            hidedata ? hidedata.map((item,index)=>{
                                return <Fragment key={index}>{ this.itemlist(item) }</Fragment>
                            }):''
                        }
                    </div>
                    <div style={expand ? blockStyle : inlineStyle }>
                        <Form.Item {...buttonItemLayout}>
                            <Button type="primary" htmlType="submit">查询</Button>
                            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>重置</Button>
                            {
                                hidedata?
                                <a href="false" style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
                                    {collapse} <Icon type={expand ? 'up' : 'down'} />
                                </a>
                                :''
                            }
                        </Form.Item>
                    </div>
                </Form>
            </div>
        )
    }
    state = {
        expand : false,
        collapse : '展开'
    }
    
    getItemsValue = ()=>{    //3、自定义方法，用来传递数据（需要在父组件中调用获取数据）
        const valus= this.props.form.getFieldsValue();       //4、getFieldsValue：获取一组输入控件的值，如不传入参数，则获取全部组件的值
        return valus;
    }


    toggle = (e) => {
        e.preventDefault();
        const { expand, collapse } = this.state;
        this.setState({
            expand: !expand,
            collapse : collapse === '展开' ? '收起' : '展开'
        });
    }
    handleReset = () => {
        this.props.form.resetFields();
        const { reset } = this.props;
        if(typeof(reset) === 'function'){
            reset();
        }
    }
    handleSearch = (e) => {
        //this.props.form.validateFields(['nickname'], { force: false, first:true });
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.submit(values)
            }
        });
    }

    itemlist=(data)=>{

        const { layout } = this.props;
        const formItemLayout = layout === 'horizontal' ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
        } : null;
        const { getFieldDecorator } = this.props.form;

        switch (data['type']) {
            case 'radio':
                return(<Form.Item
                    label={data['title']}
                    {...formItemLayout}
                >
                    {getFieldDecorator(`${data['name']}`,{
                        rules : data['rules'],
                        initialValue : data['value']
                    })(
                        <Radio.Group>
                            { data['options'].map((item,index)=>{
                                return <Radio value={item.value} key={index}>{item.name}</Radio>
                            }) }
                        </Radio.Group>
                    )}
                </Form.Item>);
            case 'radio.button':
                return(<Form.Item
                    label={data['title']}
                    {...formItemLayout}
                >
                    {getFieldDecorator(`${data['name']}`,{
                        rules : data['rules'],
                        initialValue : data['value']
                    })(
                        <Radio.Group>
                            { data['options'].map((item,index)=>{
                                return <Radio.Button value={item.value} key={index}>{item.name}</Radio.Button>
                            }) }
                        </Radio.Group>
                    )}
                </Form.Item>);
            case 'input':
                return(<Form.Item
                    label={data['title']}
                    {...formItemLayout}
                >
                    {getFieldDecorator(`${data['name']}`,{
                        rules : data['rules'],
                        initialValue : data['value']
                    })(
                        <Input placeholder={data['placeholder']} />
                    )}
                </Form.Item>)
            default:
                break;
        }
    }
}

SForm.propTypes = {
    data:PropTypes.array.isRequired
}

/**
 * @param data
 * @param style={{ marginBottom: 16 }}
 * @param layout = 'inline'
 * @param hidedata
 * @param const data = [
        {
            type:'radio',
            title:'状态',
            name:'status',
            value:[
                {value:1,name:'启动'},
                {value:2,name:'禁用'}
            ],
            rules:[{
                required: true,
                message: '错误'
            }]
        },
        {
            type:'input',
            title:'姓名',
            name:'name',
            value:'',
            placeholder:"请输入提示",
            rules:[{
                required: true,
                message: '错误'
            }]
        }
    ]
    const hidedata = [
        {
            type:'input',
            title:'密码',
            name:'password',
            value:'',
            placeholder:"请输入提示"
        }
    ]
 */
const WapperForm=Form.create({ name: 'form_search' })(SForm)

// class Index extends PureComponent{
//     render(){
//         const { data, style, layout } = this.props;
//         return(
//             <WapperForm data={data} style={style} layout={layout} />
//         )
//     }
// }


export default WapperForm;